<template>
	<view class="page-content" :style="{'--main-color-1':configInfo.mainColor,'--main-color-2':configInfo.mainColor1}">
		<u-sticky customNavHeight="0">
			<u-tabs 
				:list="withTabs" 
				:activeStyle="{color:'#3f2a17',fontSize:'28rpx'}"
				:inactiveStyle="{fontSize:'26rpx'}"
				lineColor="var(--main-color-1)"
				:scrollable="false"
				@change="tabChange">
			</u-tabs>
		</u-sticky>
		<view class="with-list">
			<m-loading :show="listLoad" :emptyShow="withLog.data.length <= 0" :emptyText="$t('withdrawal_log.none-empty')"></m-loading>
			<view class="with-list_list" v-if="!listLoad">
				<view class="list-item conter flex-between" v-for="(item,index) in withLog.data" :key="index" @click="$util.go('withdrawal/withdrawal_detail?id='+item.id)">
					<view class="list-item_info flex-start">
						<view style="width: 100%;">
							<view>
								<text class="text-xs text-secondary">{{ item.order_num }}</text>
							</view>
							<view class="list-item__title u-line-2 text-sm m-t-xs">
								<u-parse :content="$util.handleStr($t('withdrawal_log.item-tips'),item.money,configInfo.money_company)"></u-parse>
							</view>
							<view class="list-item__time text-xs text-secondary">
								{{item.create_time}}
							</view>
						</view>
						<view class="list-item__icon">
							<i-icon :name="withType[item.pay_method]['icon']" :color="withType[item.pay_method]['activeColor']"></i-icon>
						</view>
					</view>
					<view class="list-item_state loading-state" :class="{'green' : item.state == 2 , 'red' : item.state == 3 }">
						<text>{{ item.state_text }}</text>
					</view>
				</view>
			</view>
			<uni-load-more :status="status" :content-text="contentText" v-if="showLoading"></uni-load-more>
		</view>
		<!-- 侧边小工具 -->
		<side-tools :scrollTop="scrollTop"></side-tools>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				scrollTop:0,
				showLoading:false,
				status:"loading",
				listLoad:true,
				listEmptyShow:false,
				withType : {
					1:{
						'activeColor':'#666',
						'text':this.$t('withdrawal.mode-code'),
						'icon':'qr-code-line'
					},
					2:{
						'activeColor':'#1378fe',
						'text':this.$t('withdrawal.mode-alipay'),
						'icon':'alipay-line'
					},
					3:{
						'activeColor':'#36b368',
						'text':this.$t('withdrawal.mode-wxpay'),
						'icon':'wechat-pay-line'
					}
				},
			}
		},
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
			withLog: state => state.wallet.withLog,
			withParam: state => state.wallet.withParam,
			withTabs: state => state.wallet.withTabs,
			contentText: state => state.content.contentText,
		}),
		onLoad(option){
		},
		onReady(){
			if(this.$wechat.isWechat()) this.$util.navTitle()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		/* 页面显示 */
		async onShow(){
			this.getLogList();
		},
	
		/* 页面隐藏 */
		onHide(){
			// 关闭加载
			uni.stopPullDownRefresh();
		},
		
		// 右上角点击
		onNavigationBarButtonTap(){
			this.$util.go('withdrawal/withdrawal')
		},
		
		// 上拉刷新
		async onPullDownRefresh(){
			await this.getLogList(1);
			this.$util.showToast(this.$t('app.renovate.success'),function(){
				uni.stopPullDownRefresh();
			});
		},
		
		// 下滑加载
		async onReachBottom(){
			if (this.withLog.current_page >= this.withLog.last_page || this.ListLoad){
				this.status="nomore";
				return
			};
			this.status = "loading";
			this.showLoading = true;
			this.getLogList(this.withParam.page + 1);	
		},
		
		methods: {
			...mapActions(['getWithLog']),
			...mapMutations(['updateWalletState']),
			
			async getLogList(page = 0){
				if (page) {
					let withParam = uni.$u.deepClone(this.withParam)
					withParam.page = page
					this.updateWalletState({
						key: 'withParam',
						val: withParam
					})
				}
				await this.getWithLog(this.withParam)
				this.listLoad = false
			},

		
			tabChange(index){
				this.listLoad = true
				this.showLoading = false;
				this.withParam.state = index.state
				this.getLogList(1)		
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color:$bgcolor-2;
		
	}
	.u-tabs{
		background-color: #fff;
	}
	.uni-load-more{
		height: 10vh;
		margin-top: 20rpx;
	}
	.with-list{
		&_list{
			
		}
		.list-item{
			padding: 15px 30rpx;
			background-color: #fff;
			position: relative;
			overflow: hidden;
			&_info{
				align-items: flex-start;
				width: 80%;
				flex-wrap: nowrap;
			}
			&__icon{
				position: absolute;
				right: -10px;
				top: -10px;
				margin-right: 5px;
				.i-icon{
					font-size: 100rpx!important;
					opacity: .1
				}
			}
			&__title{
				width: 86%;
				color: #333;
			}
			&__time{
				margin-top: 5px;
			}
		}
	}
</style>
